<template>
    <div class="transfer">
        <el-row>
            <el-col :span="24">
                <el-select v-model="myValue" @change="changeSelect" filterable clearable :placeholder="palaceName" style="width: 100%;">
                    <el-option
                            label="空"
                            value="kong"
                    >
                    </el-option>
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    export default {
        props: {
            api: {
                type: String,
                default: ''
            },
            palaceName: {
                type: String,
                default: ''
            },
            value: {
                type: Number,
                default: null
            },
            option: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                // option: [],
                // selectId: '',
                myValue: null
            }
        },
        created() {
            // this.getPoint();
        },
        computed: {
            options() {
                let arr = this.option.map(item => {return {
                    id:item.id,
                    name:item.name + JSON.stringify(item.admin?"(" + item.admin.name + ")":"(无管理员)").replace(/\"/g, "")}
                });
                return arr;
            }
        },
        watch: {
            value: {
                handler() {
                    this.myValue = this.value;
                },
                deep:true
            },
            myValue: {
                handler(value) {
                    this.$emit('input', value);
                },
                deep: true
            }
        },
        methods: {
            // getPoint() {
            //     this.$http.get(this.api)
            //         .then((response) => {
            //             this.option = response.data.data;
            //         })
            //         .catch((error) => {
            //             if (error.response.data.msg) {
            //                 this.$message.error(error.response.data.msg);
            //             } else {
            //                 this.$message.error('请求错误：' + error.response.status);
            //             }
            //         });
            // },
            changeSelect(value) {
                console.info('站点选择', value);
                if (value == 'kong') {
                    this.myValue = null
                } else {
                    this.myValue = value;
                }

            }
        }
    }
</script>

<style scoped>
    /*.transfer {*/
    /*text-align: center;*/
    /*}*/
</style>
